Scribd
Upload
133 views3 pages

Breadcrumb untuk Blogger Pemula

Artikel ini memberikan instruksi lengkap untuk menambahkan fitur Breadcrumb Navigation pada template blog Blogger. Fitur ini bermanfaat untuk SEO karena membantu pembaca mengetahui lokasi halaman saat ini dalam hierarki situs. Instruksi tersebut meliputi mengaktifkan widget template, menambahkan kode CSS dan HTML breadcrumb, serta menempatkannya di posisi yang tepat dalam template.

Uploaded by

musliyaniarif
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
133 views3 pages

Breadcrumb untuk Blogger Pemula

Artikel ini memberikan instruksi lengkap untuk menambahkan fitur Breadcrumb Navigation pada template blog Blogger. Fitur ini bermanfaat untuk SEO karena membantu pembaca mengetahui lokasi halaman saat ini dalam hierarki situs. Instruksi tersebut meliputi mengaktifkan widget template, menambahkan kode CSS dan HTML breadcrumb, serta menempatkannya di posisi yang tepat dalam template.

Uploaded by

musliyaniarif
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 3

Membuat Breadcrumb Navigation

www.musliyani.blogspot.com

Setelah berkeliling melihat blognya blogger pemula maupun blognya para master blogger, ternyata
masih banyak blog-blog yang belum memanfaatkan fitur ‘Breadcrumb Navigation’, padahal fitur ini
merupakan salah satu syarat dari sekian banyak syarat agar webpage atau blog bisa lebih ‘SEO
Friendly’.

‘Breadcrumb Navigation’ merupakan menu navigasi yang terletak diatas Judul artikel pada sebuah
postingan. Fungsinya untuk mempermudah pembaca artikel tersebut dalam melihat posisi artikel
yang dibacanya, atau dalam mencari artikel dalam satu kategori atau label.

Fitur ‘Breadcrumb Navigation’ memiliki manfaat yang cukup berpengaruh didalam ‘Search Engine
Optimation’ atau optimasi mesin pencari, sehingga tidak ada salahnya saya bahas kembali.

1. Silahkan login ke Account Blogger anda

2. Pilih Menu Tata Letak atau Layout

3. Pilih Menu Edit HTML

4. Apabila anda ragu dengan fitur ini dan untuk menghindari kesalahan silahkan terlebih dahulu
anda Download Full Template untuk menyimpan template anda.

5. Berikan tanda ‘Checklist’ pada kolom sebelah kiri ‘Expand Template Widget’.

6. Copy kode berikut ini :

.breadcrumbs {

padding:5px 5px 5px 0px;

margin: 0px 0px 15px 0px;

font-size:95%;

line-height: 1.4em;

border-bottom:3px double #e6e4e3;

7. Paste dan letakkan kode tersebut di atas kode :

]]></b:skin>

8. Silahkan cari kode berikut pada template anda :


<div class='post hentry uncustomized-post-template'>

Atau bila tidak ketemu, cari kode :

<div class='post hentry'>

9. Copy kode di bawah ini dan letakkan dibawah kode tersebut :

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<b:else/>

<b:if cond='data:blog.pageType == "item"'>

<div class='breadcrumbs'>

Browse » <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast == "true"'> »

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

</b:if>

» <span><data:post.title/></span>

</b:loop>

</b:if>

</b:loop>

</div>

</b:if>

<b:else/>

<b:if cond='data:blog.pageType == "archive"'>

<div class='breadcrumbs'>

Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for


<data:blog.pageName/>

</div>
</b:if>

<b:else/>

<b:if cond='data:navMessage'>

<div class='breadcrumbs'>

<data:navMessage/>

</div>

</b:if>

</b:if>

10. Save Template anda.

11. Finish, silahkan cek blog anda. Semoga berhasil.

Tag : blogger triks, seo triks, Breadcrumb Navigation, blogger tutorial, blogger template

You might also like